<template>
	<view class="f_wp">
		<form class="f_form" @submit="onsubmit">
			<view class="f_form_itemn f_form_itemn1">
				<view class="f_title"><text>*</text>模板名称:</view>
				<input class="f_input" type="text" value="" placeholder="输入模板名称" />
			</view>
			<view class="f_form_itemn f_form_itemn1">
				<view class="f_title"><text>*</text>计费方式:</view>
				<radio-group name="radio">
					<label class="f_label">
						<radio class="f_radio" color="#8405dc" value="radio1" /><text>选项一</text>
					</label>
					<label class="f_label">
						<radio class="f_radio" color="#8405dc" value="radio2" /><text>选项二</text>
					</label>
				</radio-group>
			</view>
			<view class="f_form_itemn2">
				<view class="f_title"><text>*</text>模板区域:</view>
				<view class="f_list">
					<view class="f_list_item">
						<view class="f_list_address">
							<text class="f_list_a_title">区域：</text>
							全国[默认运费]<text @click="ischeck1=true">编辑</text>
						</view>
						<view class="f_list_inputs">
							<input class="f_input" type="text" value="" placeholder="首重(克)" />
							<input class="f_input" type="text" value="" placeholder="首费(元)" />
							<input class="f_input" type="text" value="" placeholder="续重(克)" />
							<input class="f_input" type="text" value="" placeholder="续费(元)" />
						</view>
						<view class="f_list_inputs">
							<input class="f_input" type="text" value="" placeholder="首件(个)" />
							<input class="f_input" type="text" value="" placeholder="运费(元)" />
							<input class="f_input" type="text" value="" placeholder="续件(个)" />
							<input class="f_input" type="text" value="" placeholder="续费(元)" />
						</view>
						<view style="text-align: right;"><text class="f_list_delete">删除</text></view>
					</view>
					<text class="iconfont icon-jiahao add_list">新增配送区域</text>
				</view>
			</view>
			<view class="f_message">根据重量来计算运费，当物品不足《首重重量》时，按照《首重费用》计算，超过部分按照《续重重量》和《续重费用》乘积来计算</view>
			<view class="f_buutton">
				<button type="warn" form-type="submit">提交</button>
			</view>
		</form>

		<form class="address_message1" v-show="ischeck1">
			<view class="address_title">提示</view>
			<checkbox-group class="address_list">
				<view>
					<checkbox value="cb" checked="true" style="transform:scale(0.7)" /><text>选中</text>
				</view>
			</checkbox-group>
			<view class="address_buttons">
				<button class="buttons1">取消</button>
				<button class="buttons2">确认</button>
			</view>
		</form>
		<form class="address_message1 address_message2" v-show="ischeck2">
			<view class="address_title">提示</view>
			<checkbox-group class="address_list">
				<label>
					<checkbox value="cb" checked="true" style="transform:scale(0.7)" /><text>选中</text>
				</label>
			</checkbox-group>
			<view class="address_buttons">
				<button class="buttons1">取消</button>
				<button class="buttons2">确认</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 区域选择框
				ischeck1: false,
				ischeck2: false,

				// 列表第几项
				listIndex: 0,
			}
		},
		methods: {
			onsubmit(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	@import "/store/icon.css";

	.f_wp {
		padding: 20upx 20upx 130upx;
		color: $font-color-dark;
	}

	.f_form_itemn {
		display: flex;
		padding-bottom: 10upx;
	}

	.f_title {
		font-size: $font-base;
		width: 150upx;
	}

	.f_title text {
		color: $base-color;
	}

	.f_form_itemn1 {
		align-items: center;
	}

	.f_input {
		color: $font-color-base;
		font-size: 26upx;
	}

	.f_label {
		margin-right: 20upx;
	}

	.f_radio {
		transform: scale(0.8);
	}

	.add_list {
		background-color: #409eff;
		border-radius: 8upx;
		color: #fff;
		display: block;
		font-size: $font-sm;
		line-height: 60upx;
		width: 70%;
		margin: 0 auto;
		text-align: center;
	}

	.f_form_itemn2 {
		padding-bottom: 10upx;
	}

	.f_list {
		color: $font-color-base;
		font-size: $font-sm;
	}

	.f_list_item {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		padding: 10upx 0;
	}

	.f_list_item:nth-last-of-type(1) {
		border: none;
	}

	.f_list_address text {
		color: $font-color-spec;
	}

	.f_list_address .f_list_a_title {
		color: $base-color;
	}

	.f_list_inputs {
		padding: 10upx 0;
		display: flex;
		align-items: center;
	}

	.f_list_inputs .f_input {
		border: 1px hsl(0, 0%, 87%) solid;
		border-radius: 6upx;
		font-size: $font-sm;
		padding: 10upx;
		height: 60upx;
	}

	.f_list_inputs .f_input:nth-of-type(2),
	.f_list_inputs .f_input:nth-of-type(3),
	.f_list_inputs .f_input:nth-of-type(4) {
		margin-left: 10upx;
	}

	.f_list_delete {
		background-color: $base-color;
		border-radius: 10upx;
		color: #fff;
		display: inline-block;
		padding: 10upx 20upx;
	}

	.f_message {
		color: $font-color-light;
		font-size: $font-sm;
	}

	.f_buutton {
		position: fixed;
		bottom: 40upx;
		font-size: 24upx;
		height: 70upx;
		width: 100%;
	}

	.f_buutton button {
		line-height: 70upx;
		font-size: $font-base;
		width: 94%;
	}

	.address_message1 {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		min-height: 100vh;
		width: 100%;
		z-index: 10;
		padding-top: var(--window-top);
	}

	.address_buttons {
		padding-top: 60upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.address_title {
		font-size: 30upx;
		line-height: 80upx;
		text-align: center;
	}

	.address_buttons button {
		border-radius: 10upx;
		line-height: 70upx;
		font-size: $font-base;
		margin: 0;
		width: 44%;
	}

	.buttons1 {
		background-color: #fff;
		border: 1px hsl(0, 0%, 87%) solid;
	}

	.buttons2 {
		background-color: #409eff;
		color: #fff;
	}

	.address_list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.address_list view {
		margin-left: 20upx;
	}

	.address_message2 {
		z-index: 20;
	}

	.address_message2 label {
		margin-left: 20upx;
	}
</style>
